// 主页面
import { useState, useEffect } from '@kit.ArkUI';
import { List, ListItem, Text } from '@kit.ArkUI';
import Logger from '../utils/Logger';

export default function MainPage() {
  const [dataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 加载数据
    loadData();
  }, []);

  async function loadData() {
    try {
      setLoading(true);
      
      // 从全局获取应用服务
      const appService = globalThis.appService;
      if (!appService) {
        throw new Error('应用服务未初始化');
      }
      
      // 获取数据服务和数据处理器
      const dataService = appService.getDataService();
      const dataProcessor = appService.getDataProcessor();
      
      // 获取原始数据
      const rawData = await dataService.getUserList();
      Logger.info('MainPage', `获取到 ${rawData.length} 条数据`);
      
      // 处理数据
      const processedData = dataProcessor.process(rawData);
      setDataList(processedData);
    } catch (error) {
      Logger.error('MainPage', '加载数据失败: ' + JSON.stringify(error));
    } finally {
      setLoading(false);
    }
  }

  return (
    {
      flexDirection: 'column',
      width: '100%',
      height: '100%',
      backgroundColor: '#f5f5f5',
      children: [
        // 页面标题
        {
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 20,
          backgroundColor: '#ffffff',
          children: [
            {
              text: '鸿蒙通用应用框架',
              fontSize: 20,
              fontWeight: 'bold',
              color: '#333333'
            }
          ]
        },
        
        // 统计信息卡片
        !loading && dataList.length > 0 && {
          padding: 15,
          margin: 10,
          backgroundColor: '#ffffff',
          borderRadius: 8,
          children: [
            {
                text: `总人数: ${dataList.length}人 | 平均薪资: ¥${globalThis.appService.getDataProcessor().calculateSalaryStats(dataList).avg.toLocaleString('zh-CN')}`,
                fontSize: 14,
                color: '#666666'
              }
          ]
        },
        
        // 数据列表
        loading ? (
          {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            children: [
              {
                text: '加载中...',
                fontSize: 16,
                color: '#666666'
              }
            ]
          }
        ) : (
          {
            flex: 1,
            padding: 10,
            children: [
              {
                component: List,
                space: 10,
                children: dataList.map((item, index) => ({
                  component: ListItem,
                  key: item.id,
                  padding: 15,
                  backgroundColor: '#ffffff',
                  borderRadius: 8,
                  children: [
                    {
                      flexDirection: 'column',
                      children: [
                        {
                          text: `${item.name} (${item.age}岁)`,
                          fontSize: 18,
                          fontWeight: 'bold',
                          color: '#333333',
                          marginBottom: 5
                        },
                        {
                          text: `邮箱: ${item.email}`,
                          fontSize: 14,
                          color: '#666666',
                          marginBottom: 5
                        },
                        {
                          text: `职位: ${item.position}`,
                          fontSize: 14,
                          color: '#666666',
                          marginBottom: 5
                        },
                        {
                          text: `部门: ${item.department}`,
                          fontSize: 14,
                          color: '#666666',
                          marginBottom: 5
                        },
                        {
                          text: `薪资: ${item.formattedSalary}`,
                          fontSize: 14,
                          color: '#ff6b35',
                          fontWeight: 'bold',
                          marginBottom: 5
                        },
                        {
                          text: `经验等级: ${item.experienceLevel} | 薪资等级: ${item.salaryLevel} | 工作年限: ${item.workingYears}年`,
                          fontSize: 14,
                          color: '#722ed1',
                          marginTop: 5
                        }
                      ]
                    }
                  ]
                }))
              }
            ]
          }
        )
      ]
    }
  );
}